<template>
  <PageWrapper contentBackground>
    <a-button preIcon="ant-design:left-outlined" type="link" @click="doBack"> 返回 </a-button>
    <Description
      size="middle"
      :title="teacherDescription"
      :column="3"
      :data="teacherInfoData"
      :schema="teacherDescSchema"
    />
    <a-button preIcon="ant-design:edit-outlined" type="link" @click="doEdit">编辑</a-button>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { Description } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { teacherDescSchema } from './teacherDescSet';
  import { useRoute, useRouter } from 'vue-router';
  import type { TeacherListItem } from '../../api/preschool/types/teacher';
  import { useGo } from '/@/hooks/web/usePage';
  import { useTeacherInfoStore } from '/@/store/modules/teacher';
  export default defineComponent({
    components: { Description, PageWrapper },
    setup() {
      let teacherDescription = ref<string>('');
      const route = useRoute();
      const router = useRouter();
      const go = useGo();
      const teacherStore = useTeacherInfoStore();

      let teacherInfoData = ref<TeacherListItem>();

      onMounted(async () => {
        let teacherInfo = await teacherStore.setTeacherInfo(route.params.id as string);
        teacherInfoData.value = teacherInfo as TeacherListItem;
        teacherDescription.value = '教师' + teacherInfoData.value.name + '详细信息';
      });

      const doBack = () => {
        router.back();
      };
      const doEdit = () => {
        go('/teacher/teacherEdit/' + route.params.id);
      };
      return {
        teacherDescription,
        teacherDescSchema,
        teacherInfoData,
        doBack,
        doEdit,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap {
    padding: 16px;
    background-color: @component-background;
  }
</style>
